<template>
  <div class="bread">
    <div>
      <i @click="backHome">
        <slot name="first"></slot>
      </i>
      >
      <i>
        <slot name="second"></slot>
      </i>
    </div>
    <h1>
      <slot name="third"></slot>
    </h1>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const backHome = () => {
    router.push('/home')
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .bread {
      position: relative;
      font-size: 18px;
      color: #fff;
      cursor: default;

      div {
        position: absolute;
        left: 0;
        right: 0;
        i {
          transition: all 0.4s;
          &:nth-child(1) {
            cursor: pointer;
          }
          &:nth-child(2) {
            cursor: pointer;
          }
          &:hover {
            font-weight: 700;
            font-size: 30px;
          }
        }
      }
      h1 {
        font-size: 42px;
        color: #fff;
        font-weight: normal;
        margin-bottom: 20px;
        margin-top: 10px;
        padding-top: 35px;
        padding-left: 12px;
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .bread {
      position: relative;
      font-size: 14px;
      color: #fff;
      cursor: default;

      div {
        position: absolute;
        left: 0;
        right: 0;
        i {
          transition: all 0.4s;
        }
      }
      h1 {
        font-size: 28px;
        color: var(--text-bright);
        font-weight: normal;
        margin-bottom: 20px;
        margin-top: 10px;
        padding-top: 35px;
        padding-left: 12px;
      }
    }
  }
</style>
